<template>
  <border :moduleType="borderConfig.moduleType"
          :icon="borderConfig.icon"
          :titleText="borderConfig.titleText"
          :organType="borderConfig.organType"
          :goPageUrl="borderConfig.goPageUrl">
    <div slot="module-content"
         class="mission-chart"
				 ref="missionChart">
    </div>
  </border>
</template>

<script>
import Border from './../components/Border.vue'
import echarts from 'echarts'
export default {
  name: 'serviceOrder',
  components: {
    Border
	},
	data () {
    return {
      borderConfig: {
        moduleType: '1x1',
        icon: '',
        titleText: '任务看板'
      },
      moduleConfig: {
        isOctagon: false, // 是否需要头部的八边形
        topType: '13', // 第一层显示内容
        bottomType: '14' // 第二层显示内容
			},
			missionChart: ''
		}
	},
	methods: {
		// 渲染
		getMissionOption (options) {
			let option = null
			option = {
				tooltip: {
					trigger: 'axis',
					formatter: '{b}： {c}%',
					axisPointer: {
						type: 'shadow',
						lineStyle: {
							color: '#57617B'
						},
						shadowStyle: {
							color: 'rgba(22, 112, 218, 0.2)'
						}
					},
					position: function (pos, params, dom, rect, size) {
						// 鼠标在左侧时 tooltip 显示到右侧，鼠标在右侧时 tooltip 显示到左侧。
						var obj = {top: pos[1]}
						obj[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = 15
						dom.style.border = '1px solid #1072e2'
						dom.style.backgroundColor = 'rgba(7, 23, 62, 0.8)'
						dom.style.padding = '10px 14px'
						let messageDom = '<span>' + params[0].axisValue + ': <span style="color: #2e92cb">' + params[0].value + '%</span></span>'
						dom.innerHTML = messageDom
						return obj
					}
				},
				grid: {
					top: '10',
					bottom: '40',
					left: '102',
					right: '25'
				},
				xAxis: {
					type: 'value',
					position: 'bottom',
					splitLine: {
						show: false
					},
					axisLabel: {
						textStyle: {
							color: '#7aabe7'
						}
					},
					axisLine: {
						lineStyle: {
							color: '#04427b'
						}
					}
				},
				yAxis: {
					type: 'category',
					axisLabel: {
						textStyle: {
							color: '#7aabe7'
						}
					},
					axisLine: {
						lineStyle: {
							color: '#04427b'
						}
					},
					axisTick: {
						show: false
					},
					splitLine: {
						show: false,
						lineStyle: {
							type: 'dashed',
							color: ['#07356f']
						}
					},
					data: ['安防年度任务', '财务年度任务', '绿化年度任务', '客服年度任务', '设备年度任务']
				},
				series: [
					{
						name: '完成',
						type: 'bar',
						silent: false,
						stack: 'percentage',
						barGap: '-100%',
						itemStyle: {
							normal: {
								color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
									{offset: 0, color: '#1560fb'},
									{offset: 0.5, color: '#0a98fd'},
									{offset: 1, color: '#1560fb'}]),
								shadowColor: 'rgba(0, 0, 0, 0.1)',
								shadowBlur: 10
							}
						},
						barWidth: 20,
						data: [100, 40, 50, 60, 70]
					},
					{
						type: 'bar',
						silent: false,
						barGap: '-100%',
						barWidth: 20,
						data: [100, 100, 100, 100, 100],
						label: {
							normal: {
								textStyle: {
									color: '#682d19'
								},
								position: 'left',
								show: false,
								formatter: '{b}'
							}
						},
						itemStyle: {
							normal: {
								color: 'transparent',
								borderWidth: 1,
								borderColor: '#1560fb'
							}
						}
					},
					{
						type: 'bar',
						silent: false,
						barGap: '-100%',
						stack: 'percentage',
						barWidth: 20,
						data: [0, 60, 50, 40, 30],
						label: {
							normal: {
								show: true,
								formatter: function (val) {
									let perc = 100 - val.value + '%'
									return perc
								},
								position: 'right',
								textStyle: {
									color: '#fff'
								},
								offset: [-10, 0],
								align: 'right'
							}
						},
						itemStyle: {
							normal: {
								color: 'transparent',
								borderWidth: 1,
								borderColor: '#1560fb'
							}
						}
					}
				]
			}
			return option
		},
		getData () {
			console.log(123213213123112)
			// if (this.missionChart === '') {
			// 	this.missionChart.clear()
			// 	this.missionChart.setOption(that.getMissionOption())
			// } else {
			// 	this.missionChart.setOption(that.getMissionOption())
			// }
			this.missionChart = echarts.init(this.$refs.missionChart)
			this.missionChart.setOption(this.getMissionOption())
		},
		resizeChart () {
      this.missionChart.resize()
    }
	},
	mounted () {
		// this.getData()
	}
}
</script>

<style lang="scss">
	.mission-chart {
		width: 100%;
		height: 100%;
	}
</style>